<template>
  <div>
    <img :src="img" alt="" @click="dianji" />
    <p :style="{background:color}">{{ name }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    dianji() {
      const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
      this.color = '#'
      for (let i = 0; i < 6; i++) {
        const index = Math.floor(Math.random() * arr.length)
        this.color += arr[index]
      }
      this.$emit('xiaogou', this.index)
    },
  },
  data() {
    return { 
      color:''
    }
  },
  props: ['img', 'name', 'index'],
}
</script>

<style>
div {
  float: left;
}
div img {
  width: 450px;
  height: 250px;
  border: 5px black solid;
}
div p {
  text-align: center;
}
</style>
